<template>
    <div style="width: 100%">
        <div class="mb10">
            <el-form-item prop="province_id" :rules="[{required:true,message:'请选择县市区'}]">
                <el-cascader v-model="area"
                             :props="areaProps"
                             ref="cascaderRef" />
            </el-form-item>
        </div>


        <el-space class="mb10" fill>
            <el-form-item>
                <el-select v-model="info.location"
                           popper-class="addressSelect"
                           filterable
                           remote
                           :loading="select.loading"
                           :remote-method="getOptions"
                           @change="addressChange"
                           placeholder="输入关键词搜索位置">
                    <el-option
                        v-for="(item,i) in select.options"
                        :key="i"
                        :label="item.title"
                        :value="i"
                    >
                        <div class="f_primary">{{ item.title }}</div>
                        <div class="f_secondary">{{item.address}}</div>
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item prop="lng" :rules="[{required:true,message:'请搜索位置信息,确认经纬度'}]">
                <mi-input :modelValue="location" disabled />
            </el-form-item>

        </el-space>
        <div>
            <span class="f_secondary f12">编辑详细地址:</span>
            <el-form-item prop="address" :rules="[{required:true,message:'请编辑详细地址'}]">
                <mi-input v-model="info.address" />
            </el-form-item>
        </div>
    </div>
</template>

<script setup lang="ts">
import {computed, onBeforeMount, reactive, Ref, ref, watch} from "vue";
import {jsonp} from "vue-jsonp"
import {simpleGet} from "@/utils/request";
import {msgError} from "@/utils/alert";

const props = defineProps(['info'])
const select : any = reactive({
    options:[],
    loading:false,
})

const cascaderRef : Ref<any> = ref()
const areaProps = {
    lazy: true,
    lazyLoad(node:any, resolve:any) {
        const { level } = node
        const pid = node.value ? node.value : 1
        simpleGet('/sys.area/options', {pid:pid}).then((res:any) => {
            const options = res.options.map((item:any) => {
                return {
                    value: item.id,
                    label: item.title,
                    leaf: level >= 2
                }
            })
            resolve(options)
        })
    },
}

const area =computed({
    get:() => {
        let area = []
        if (props.info.province_id){
            area.push(props.info.province_id)
        }
        if (props.info.city_id){
            area.push(props.info.city_id)
        }
        if (props.info.district_id){
            area.push(props.info.district_id)
        }
        return area
    },
    set:(val) => {
        let pid,cid,did = 0
        if (val.length == 1){
            pid = val[0]
        }else if (val.length == 2){
            pid=val[0]
            cid=val[1]
        }else if (val.length == 3){
            pid=val[0]
            cid=val[1]
            did=val[2]
        }
        props.info.province_id = pid
        props.info.city_id = cid
        props.info.district_id = did
    }
})

const location = computed(() => {
    let location = ''
    if (props.info.lng && props.info.lng){
        return `经度：${props.info.lng} - 纬度：${props.info.lat}`
    }
    return location
})

const getOptions = (query:any) =>  {
    if (query) {
        select.loading = true

        const nodes = cascaderRef.value?.getCheckedNodes()
        if (nodes.length == 0){
            msgError('请先选择地区')
            return
        }
        const district = nodes[0].label

        // 调用腾讯地图的搜索功能
        let url="https://apis.map.qq.com/ws/place/v1/search"; //请求路径
        url+="?keyword="+query;  //关键词
        url+=`&boundary=region(${district})`;  // 城市
        url+="&output=jsonp&callback=changeAddressList";  //指定JSONP回调函数名，本例为cb
        url+="&key=LUBBZ-DJD3I-HANG7-5BCOF-FKHE2-DTBFE"; //开发key，可在控制台自助创建

        jsonp(url).then(res => {
            const status = res.status
            if (status == 0){
                select.options = res.data
            }else{
                select.options = []
                msgError(res.message)
            }
            select.loading = false
        });

    } else {
        select.options = []
    }
}

const addressChange = (val:any) => {

    let option: any = select.options[val]

    // 修改经纬度和地址
    props.info.lng = option.location.lng
    props.info.lat = option.location.lat

    let ad_info = option.ad_info
    props.info.area_title = ad_info.province + ad_info.city + ad_info.district
    // 拼接删除省市区后的地址
    props.info.address = option.address.replace(props.info.area_title, '') +' ' + option.title
}


</script>

<style scoped>
.addressSelect li.el-select-dropdown__item{
    height: auto !important;
}
</style>
